<template>
  <div class="newsDetail">
    <!-- 头部区域 -->
    <div class="top">
      <p class="title">{{ newsDetail[0].title }}</p>
      <p class="info">
        <span>发表时间: {{ newsDetail[0].add_time | dataTime }}</span>
        <span>点击: {{ newsDetail[0].click }} 次</span>
      </p>
    </div>
    <!-- 内容区域 -->
    <div class="content" v-html="newsDetail[0].content"></div>
    <!-- 评论区域 -->
    <comment :id="this.id"></comment>
  </div>
</template>

<script>
import comment from '../../components/comment/Comment'
export default {
  name: "newsDetail",
  components: {
    comment
  },
  data() {
    return {
      id: this.$route.query.id,
      newsDetail: [
          { id: 0, title: "一想二干三成功，企业是船。", click: 2, add_time: "1563858964", content: "<div><h1 style='text-align: center;'>标题</h1><p>这是内容。。。</p><img src='http://img.99zuowen.com/uploads/allimg/151221/1213-1512210Z215317.jpg'><img src='http://img4.cache.netease.com/photo/0001/2010-01-19/5TCNCBAB00AQ0001.jpg'>" },
      ]
    }
  },
  created() {
      // this.getNewsDetail()
  },
  methods: {
      getNewsDetail() {// 获取新闻详情
      this.$axios.get("http://suggest.taobao.com").then(response => {
          // 请求成功
        }).catch(error => {
          // 请求失败
        });
    }
  }
};
</script>

<style lang="scss">
.newsDetail {
  padding: 10px;
  .top {
    .title {
      text-align: center;
      color: #ff1493;
      font-size: 18px;
      font-weight: bold;
    }
    .info {
      display: flex;
      justify-content: space-between;
      color: #00bfff;
    }
  }
  .content {
    border-top: 2px solid #c0c0c0;
    margin-top: 10px;
    padding-top: 10px;
    img {
        width: 100%;
    }
  }
}
</style>